<template>
  <div class="all">
    <too></too>
    <div class="wrapper">
      <swiper :options="swiperOption" class="swiper" v-if="topswiper.length">
        <swiper-slide class="top_lb" v-for="(item, index) in topswiper" :key="index">
          <img :src="item.beijing_image" class="lb_img top_lb_img">
          <div class="lb_text">
            <div class="lb_text1">{{item.txt_tou}}</div>
            <div class="lb_text2">{{item.txt_zhong}}</div>
            <div class="lb_text3">{{item.txt_wei}}</div>
          </div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        <!-- <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div> -->
      </swiper>
    </div>
    <div class="apps">
      <div class="app_tits">哪些行业需要做APP ？</div>

      <div class="apps_text">十年巨变，移动互联网已颠覆我们的时代，商业社交，新闻，工具等领域，移动应用率已超过95%，在团购、旅游
        零售行业，移动端规模已超过PC端，手机APP已成为企业不可缺少的领域
      </div>
      <div class="apps_imgs">
        <img v-for="item in hangye" :src="item.hangye_image" class="apps_img">
      </div>

    </div>
    <div class="anli">
      <div class="al_tit">项目案例</div>
      <div class="al_con">迄今为止，尚新科技有限公司已服务多家企业单位，圆满的完成了诸多软件服务项目</div>
      <div class="wrapper wrapper2" v-if="lunbo.length">
        <swiper :options="swiperOption1" class="swiper swiper2">
          <swiper-slide v-for="(item, index) in lunbo" :key="index">
            <div class="wrap_tit">
              <img :src="item.yemiantu_image" class="lb_img2" @click="details(item.detail_image)">
              <div class="xian_img">
                <img src="../assets/zuo.png" class="xian">
                {{item.name}}
                <img src="../assets/you.png" class="xian">
              </div>
            </div>
          </swiper-slide>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>

      <div class="anli_bot">
        <img src="../assets/jiazai.png" class="anli_bot_img1" @click="projects">
        <div class="anli_bot_text" @click="projects">查看更多</div>
        <img src="../assets/gengduoanli.png" class="anli_bot_img2" @click="contact">
      </div>
    </div>
    <div class="chanpin">
      <div class="cp_tit">我们的产品</div>
      <div class="our">
        <img src="../assets/zuo1.png" class="our_img">
        <div>OUR&nbsp;&nbsp;&nbsp;PRODUCT</div>
        <img src="../assets/you1.png" class="our_img">
      </div>
      <div class="cp_list">
        <div class="cp_lista" v-for="(item, index) in arr" :key="index">
          <img :src="item.title_image" class="cp_img">
          <div class="cp_list_right">
            <div class="cp_name">{{item.name}}</div>
            <div class="cp_text">{{item.engtitle}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="why">
      <div class="why_tit">为什么选择尚新科技？</div>
      <div class="why_tit2">WHY NEW TECHNOLOGY?</div>
      <div class="rens">
        <img src="../assets/ren.png" class="why_img">
        <div class="rens_bot">
          <div class="rens_bot_top">
            <div class="rens_b_topa rens_b_topa1">
              <span class="rens_price">价格</span>对比行业平均<br/>
              <span class="bili">10%<img src="../assets/xia.png" class="xia"></span>
            </div>
            <div class="rens_b_topa">
              <span class="rens_price">质量</span>对比行业平均<br/>
              <span class="bili">60%<img src="../assets/shang.png" class="xia"></span>
            </div>
          </div>
          <div class="rens_bot_bot">
            <div class="rens_list">
              <img src="../assets/jingyanfengfu.png" class="rens_list_img">
              <div class="rens_list_tit">经验丰富</div>
              <div class="rens_list_text">研发技术成员多<br/>项目经验积累多</div>
            </div>
            <div class="rens_list">
              <img src="../assets/zhiliangbaozheng.png" class="rens_list_img">
              <div class="rens_list_tit">质量保证</div>
              <div class="rens_list_text">标准化项目<br/>实施流程</div>
            </div>
            <div class="rens_list">
              <img src="../assets/jiageshihui.png" class="rens_list_img">
              <div class="rens_list_tit">价格实惠</div>
              <div class="rens_list_text">按需定制，收费透明<br/>拒绝模糊报价</div>
            </div>
            <div class="rens_list">
              <img src="../assets/xiangmujincheng.png" class="rens_list_img">
              <div class="rens_list_tit">项目进程</div>
              <div class="rens_list_text">开发进度让<br/>您了如指掌</div>
            </div>
            <div class="rens_list">
              <img src="../assets/fuwutaidu.png" class="rens_list_img">
              <div class="rens_list_tit">服务态度</div>
              <div class="rens_list_text">完善的售后<br/>服务体系</div>
            </div>
            <div class="rens_list">
              <img src="../assets/gongsiguimo.png" class="rens_list_img">
              <div class="rens_list_tit">公司规模</div>
              <div class="rens_list_text">欢迎随时前来视察<br/>合作更放心</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="kaifa">
      <div class="kaifa_tit">我们的开发流程</div>
      <div class="kaifa_text">从01到08，必须严格遵循流程才能确保质量与工期</div>
      <img src="../assets/kaifa.png" class="kaifa_img">
    </div>

    <div class="liuyan">
      <div class="why_tit">留言咨询</div>
      <div class="ly_con al_con">您可以拨打我们的7x24小时客服热线18239985567(微信同号)，也可以选择给我们留言，我们收到会第一时间联系您</div>
      <div class="ly_ipt">
        <div>姓名：</div>
        <input type="text" v-model="name" placeholder="请输入您的姓名"/>
      </div>
      <div class="ly_ipt">
        <div>联系电话：</div>
        <input type="text" v-model="phone" placeholder="请输入您的联系电话"/>
      </div>
      <div class="ly_ipt">
        <div>项目需求：</div>
        <input type="text" v-model="xuqiu" placeholder="请填写您的项目需求"/>
      </div>
      <div class="ly_reds">我们将及时回访您，请保持手机畅通。</div>
      <img src="../assets/queding.png" class="ly_img" @click="tijiao">
    </div>
    <foo></foo>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import too from '../components/too'
  import foo from '../components/foo'

  export default {
    name: 'pagesIndex',
    components: {
      too,
      foo,
      swiper,
      swiperSlide,
    },
    data() {
      return {
        swiperOption: {
          loop: true,
          autoplay: true,
          navigation: {
            nextEl: '.swiper-button-next',//自动隐藏
            prevEl: '.swiper-button-prev',//自动隐藏
            hiddenClass: 'btn-hidden',//某些情况下需要隐藏前进后退按钮时，可以设定一个自定义的类名。
          },
          autoplay: {
            disableOnInteraction: false, //手动滑动之后不打断播放
            delay: 2000
          },
          pagination: {
            el: '.swiper-pagination',//自动隐藏
            clickable: true,
          },
        },
        swiperOption1: {
          slidesPerView: 3,
          loop: true,
          navigation: {
            nextEl: '.swiper-button-next',//自动隐藏
            prevEl: '.swiper-button-prev',//自动隐藏
            hiddenClass: 'btn-hidden',//某些情况下需要隐藏前进后退按钮时，可以设定一个自定义的类名。
          },
          autoplay: {
            disableOnInteraction: false, //手动滑动之后不打断播放
            delay: 2000
          },
          spaceBetween: 10,
          freeMode: true,
          observer: true,
          observeParents: true
        },
        arr: [],
        name: '',
        phone: '',
        xuqiu: '',
        lunbo: [],
        topswiper: [],
        hangye: []
      }
    },
    created(options) {
      this.initData();
      this.initTopSwiper();
    },
    mounted() {
      layui.use(['laypage', 'element', 'layer'], function () {
        var element = layui.element,
          laypage = layui.laypage,
          layer = layui.layer;
      })
    },
    methods: {
      initData() {
        let loads = layui.layer.load(2, {
          shade: [0.6, '#fff'] //0.1透明度的白色背景
        });
        let that = this;
        this.$http.post(this.$common.baseUrl + '/api/Guanwang/ourproject').then(res => {
          layui.layer.close(loads);
          if (res.data.code == 1) {
            for (let i = 0; i < res.data.data.length; i++) {
              res.data.data[i].title_image = that.$common.baseUrl + res.data.data[i].title_image
            }
            that.arr = res.data.data;
          } else {
            layui.layer.msg(res.data.msg);
          }
        })
        this.$http.post(this.$common.baseUrl + '/api/Guanwang/xmal').then(res => {
          layui.layer.close(loads);
          if (res.data.code == 1) {
            let xlist = [],
              data = res.data.data.list;
            for (let i = 0; i < data.length; i++) {
              if (data[i].is_lunbo == 1) {
                xlist.push(data[i]);
              }
            }
            for (let i = 0; i < xlist.length; i++) {
              xlist[i].yemiantu_image = that.$common.baseUrl + xlist[i].yemiantu_image
            }
            that.lunbo = xlist;
          } else {
            layui.layer.msg(res.data.msg);
          }
        })
        this.$http.post(this.$common.baseUrl + '/api/guanwang/fwhy').then(res => {
          res.data.data.forEach((item, index) => {
            item.hangye_image = this.$common.baseUrl + item.hangye_image;
          })
          this.hangye = res.data.data;
        })
      },
      tijiao() {
        let that = this;
        let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
        if (!reg.test(that.phone)) {
          layui.layer.msg("请输入正确的手机号");
        } else {
          let params = {
            phone: that.phone,
            name: that.name,
            xuqiu: that.xuqiu
          }
          this.$http.post(this.$common.baseUrl + '/api/Guanwang/lyzx', params).then(res => {
            if (res.data.code == 1) {
              layui.layer.msg(res.data.msg);
              that.phone = '';
              that.name = '';
              that.xuqiu = '';
            } else {
              layui.layer.msg(res.data.msg);
            }
          })
        }
      },
      initTopSwiper() {
        this.$http.post(this.$common.baseUrl + '/api/Guanwang/toulunbo').then(res => {
          for (let k in res.data.data) {
            res.data.data[k].beijing_image = this.$common.baseUrl + res.data.data[k].beijing_image;
          }
          this.topswiper = res.data.data;
          this.swiperOption.autoplay = true;
        })
      },
      details(img) {
        let detalis = this.$common.baseUrl + img;
        this.$router.push({name: 'details', params: {url: detalis}})
      },
      projects() {
        this.$router.push({path: '/projects'})
      },
      contact() {
        this.$router.push({path: '/contact'})
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  /* @media screen and (max-width: 768px){
      .all{
        font-size: 10px;
      }
  } */
  .all {
    width: 100%;
    font-size: 1.5vw;
    color: #333333;
  }

  .wrapper {
    width: 100%;
    height: 35vw;
  }

  .swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-button-prev, .swiper-button-next {
    color: #2D2C2A !important;
  }

  .lb_text {
    width: 75%;
    height: 60%;
    z-index: 99;
    color: #FFFFFF;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 0.55rem;
    letter-spacing: 0.1rem;
  }

  .lb_text1 {
    font-size: 4vw;
  }

  .lb_text2 {
    font-size: 3vw;
  }

  .lb_text3 {
    font-size: 2vw;
  }

  .top_lb {
    position: relative;
  }

  .top_lb_img {
    position: absolute;
    top: 0;
    left: 0;
  }

  .lb_img {
    width: 100%;
    height: 100%;
  }

  .anli {
    width: 100%;
    background: url('../assets/beijing.png') no-repeat;
    background-size: 100% 100%;
    text-align: center;
    padding: 1vw 0;
  }

  .al_tit {
    font-size: 3vw;
    letter-spacing: 0.1rem;
    padding: 0.5rem 0 0.3rem 0;
  }

  .al_con {
    margin: auto;
    width: 55%;
    text-align: center;
    letter-spacing: 0.1rem;
    line-height: 3vw;
    color: #333333;
  }

  .swiper2 {
    width: 80%;
    margin: auto;
  }

  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .wrap_tit {
    font-size: 0.3rem;
    letter-spacing: 0.02rem;
  }

  .lb_img2 {
    width: 15vw;
    height: auto;
    margin: 0 0.5rem;
    cursor: pointer;
  }

  .kaifa {
    width: 100%;
    background: #F1FCFF;
    padding: 4.5vw 0;
    letter-spacing: 0.1rem;
  }

  .kaifa_tit {
    font-size: 3vw;
  }

  .kaifa_text {
    padding: 2vw 0 4vw 0;
    font-size: 1.5vw;
  }

  .kaifa_img {
    width: 80%;
    height: auto;
    margin: 0 auto;
  }

  .why {
    padding: 3vw 0;
    text-align: center;
  }

  .why_tit {
    font-size: 3vw;
    color: #0086CC;
    letter-spacing: 0.1rem;
  }

  .why_tit2 {
    color: #999999;
    padding-top: 0.2rem;
  }

  .why_img {
    width: 80%;
    height: auto;
    margin: 2vw 0 1vw 0;
  }

  .rens {
    position: relative;
  }

  .rens_bot {
    position: absolute;
    width: 72%;
    top: 0;
    left: 14%;
    height: 100%;
  }

  .rens_bot_top {
    display: flex;
    justify-content: space-between;
    padding-top: 11vw;
  }

  .rens_b_topa {
    width: 26%;
    font-size: 1.6vw;
    letter-spacing: 0.05rem;
  }

  .rens_b_topa1 {
    margin-top: 1.5vw;
  }

  .rens_price {
    font-size: 2.5vw;
    color: #0086CC;
  }

  .bili {
    font-size: 4vw;
  }

  .xia {
    width: 3vw;
    height: auto;
    margin-bottom: 0.5vw;
  }

  .rens_bot_bot {
    width: 100%;
    position: absolute;
    bottom: 1vw;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

  }

  .rens_list {
    padding: 2vw 0;
    width: 32%;
    letter-spacing: 0.05rem;
  }

  .rens_list_img {
    width: 4vw;
    height: 4.5vw;
  }

  .rens_list_tit {
    font-size: 2vw;
    padding: 1vw 0;
  }

  .rens_list_text {
    font-size: 1.2vw;
    line-height: 2vw;
  }

  .liuyan {
    width: 100%;
    padding: 4.5vw 0;
    background: url('../assets/ly.png');
    background-size: 100% 100%;
  }

  .ly_con {
    width: 65%;
    line-height: 0.6rem;
    padding: 1vw 0;
  }

  .ly_ipt {
    width: 60%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    padding: 0.23rem 0;
  }

  .ly_ipt div {
    width: 20%;
    letter-spacing: 0.07rem;
    text-shadow: 1px 1px 1px #555555;
    color: #555555;
    text-align: left;
  }

  .ly_ipt input {
    width: 75%;
    padding: 0.15rem;
    border: 1px solid gray;
    outline: none;
    font-size: 1.5vw;
    letter-spacing: 0.1rem;
  }

  .ly_reds {
    color: #DF0100;
    font-size: 1.5vw;
    font-weight: 600;
    letter-spacing: 0.05rem;
    width: 55%;
    margin: 0 auto;
    text-align: right;
  }

  .ly_img {
    width: 25vw;
    height: auto;
    margin: 1.2rem 0 auto;
    cursor: pointer;
  }

  .apps {
    width: 100%;
  }

  .app_tits {
    font-size: 3vw;
    letter-spacing: 0.1rem;
    padding: 5vw 0 1vw 0;
    width: 100%;
    text-align: center;
  }

  .apps_text {
    width: 70%;
    letter-spacing: 0.05rem;
    font-size: 1.2vw;
    line-height: 3vw;
    margin: 0 auto;
    color: #555555;
  }

  .apps_imgs {
    width: 70%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 3vw 0;
  }

  .apps_img {
    width: 12vw;
    height: auto;
    margin: 1.5vw 2vw;
  }

  .xian_img {
    font-size: 1.3vw;
    padding-top: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .xian {
    width: 5vw;
    height: auto;
    margin: 0 0.2rem;
  }

  .anli_bot_img1 {
    width: 6vw;
    height: 6vw;
    cursor: pointer;
    margin-top: 2vw;
  }

  .anli_bot_text {
    font-size: 1.5vw;
    color: #0293D6;
    letter-spacing: 0.1rem;
    margin: 0.2rem 0 0.5rem 0;
    cursor: pointer;
  }

  .anli_bot_img2 {
    width: 25vw;
    height: auto;
    cursor: pointer;
    margin-bottom: 2vw;
  }

  .chanpin {
    background: url('../assets/chanpin_bg.png') no-repeat;
    background-size: 100% 100%;
    padding: 3vw 0 5vw 0;
  }

  .cp_tit {
    color: #FFFFFF;
    font-size: 3vw;
    padding: 1.5vw 0;
    letter-spacing: 0.1rem;
  }

  .our {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2vw;
    color: #FFFFFF;
    padding-bottom: 1vw;
  }

  .our_img {
    width: 25%;
    height: auto;
    margin: 0 1.5vw;
  }

  .cp_list {
    width: 70%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .cp_lista {
    width: 30%;
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1vw 0;
    border-radius: 20px;
    letter-spacing: 0.02rem;
    margin: 2vw 0;
  }

  .cp_img {
    width: 10vw;
    height: 10vw;
  }

  .cp_name {
    font-size: 1.7vw;
    padding: 0.1rem 0;
  }

  .cp_text {
    color: #686C6D;
    font-size: 1vw;
    line-height: 2vw;
  }

  .cp_list_right {
    width: 50%;
  }

  @media only screen and (max-width: 1200px) {
    .wrapper {
      height: 3rem;
    }

    * {
      font-size: 18px !important;
    }

    .wrapper2 {
      height: 4rem;
    }

    .app_tits {
      font-size: 21px !important;
      padding: 0.5rem 0 0.2rem 0;
    }

    .apps_text {
      font-size: 5px !important;
      letter-spacing: 0.04rem;
      line-height: 0.3rem;
    }

    .apps_img {
      width: 1.2rem;
      height: 1rem;
      margin: 0.1rem 0.2rem;
    }

    .al_tit {
      font-size: 25px !important;
    }

    .lb_img2 {
      width: 1.3rem;

    }

    .xian_img {
      font-size: 1px !important;
    }

    .xian {
      width: 0.5rem;
    }

    .anli_bot_img1 {
      width: 0.6rem;
      height: 0.6rem;
    }

    .anli_bot_img2 {
      width: 3rem;
      height: 0.5rem;
      margin: 0;
    }

    .cp_img {
      width: 1rem;
      height: 1rem;
    }

    .rens_bot_bot {
      bottom: 0.2rem;
    }

    .rens_list {
      padding: 0.2rem 0;
    }

    .rens_list_img {
      width: 0.5rem;
      height: 0.6rem;
    }

    .rens_list_tit {
      font-size: 5px;
      padding: 0rem;
    }

    .rens_list_text {
      font-size: 5px;
    }

    .al_tit {
      font-size: 25px !important;
    }

    .al_con {
      font-size: 18px !important;
    }

    .rens_bot_top {
      padding-top: 1.6rem;
    }

    .xia {
      width: 0.3rem;
      height: 0.3rem;
    }
  }
</style>
